<!DOCTYPE html>

<html>
  <head>
    <!-- uncomment next line to connect publisher to rempl server -->
    <!-- <meta name="rempl:server" content="localhost:8177" /> -->
    <title>React render cases</title>
    <link href="index.css" rel="stylesheet" />
  </head>
  <body>
    <div class="playground">
      <section class="playground__header">
        <h1>React Render Tracker playground</h1>
      </section>
      <setion class="playground__sidebar"></setion>
      <setion class="playground__content"></setion>
    </div>
    <script
      src="./react-render-tracker.js"
      data-config="
        inpage:true,
        openSourceLoc: //'/open-in-editor?file=[file]' ||
        '{cwd}' && {
          pattern: 'vscode://file/[file]',
          projectRoot: '{cwd}',
        }
      "
    ></script>
    <script type="module">
      function loadScript(src, type) {
        return new Promise((resolve, reject) => {
          const script = document.createElement("script");

          if (type) {
            script.type = type;
          }

          script.src = src.replace("[version]", version);
          script.onload = () => resolve();
          script.onerror = error => {
            const msg = "Failed to load " + script.src;
            const errorEl = document.createElement("div");
            errorEl.append(msg);
            document.querySelector(".playground__content").append(errorEl);
            reject(new Error(msg));
          };

          document.body.append(script);
        });
      }

      const params = new URLSearchParams(location.hash.slice(1));
      const version = params.get("version") || "18.2.0";
      const bundleType = {
        production: "production.min",
        profiling: "profiling.min"
      }[params.get("bundle-type")] || "development";
      const scripts = [
        "https://cdn.jsdelivr.net/npm/react@[version]/umd/react.[bundleType].js",
        "https://cdn.jsdelivr.net/npm/react-dom@[version]/umd/react-dom.[bundleType].js",
      ];

      addEventListener("hashchange", () => {
        const newParams = new URLSearchParams(location.hash.slice(1));

        if (
          newParams.get("version") !== params.get("version") ||
          newParams.get("bundle-type") !== params.get("bundle-type") ||
          newParams.get("data-client") !== params.get("data-client")
        ) {
          location.reload();
        }
      });

      let lastLoadScriptPromise = Promise.resolve();

      for (const src of scripts) {
        lastLoadScriptPromise = lastLoadScriptPromise.then(() =>
          loadScript(
            src
              .replace("[version]", version)
              .replace("[bundleType]", bundleType)
          )
        );
      }

      lastLoadScriptPromise.then(() => {
        loadScript("./index.js", "module");
      });

      if (params.has('data-client')) {
        loadScript("./data-client-example.js", "module");
      }
    </script>
  </body>
</html>
